<script>
import {
  getKeyWordBrandCharacter,
  addKeyWordBrandCharacter,
  delKeyWordBrandCharacter
} from "@/views/manage/keyWord/api/index.js";
import { isNull } from "@/utils/service";
import { copy } from "@/utils/service";

export default {
  name: "keyWordBrandCharacter",
  data() {
    return {
      searchFiled: "",
      addName: "",
      show: false,
      table: {},
      tags: []
    };
  },
  methods: {
    open(){
      this.show = true
      getKeyWordBrandCharacter(this, res => {
        this.tags = res;
      });
    },
    /** 新增关键字品牌 */
    addKeyWordBrandCharacter(name) {
      addKeyWordBrandCharacter(this, name, () => {
        getKeyWordBrandCharacter(this, res => {
          this.tags = res;
        })
      })
    },
    /** 模糊搜索关键字品牌 */
    search() {
      const searchTerm = this.searchFiled.trim().toLowerCase();
      if (isNull(searchTerm)) {
        this.tags.forEach(tag => {
          tag.type = ''
        })
      } else {
        this.tags.forEach(tag => {
          tag.type = tag.name.toLowerCase().includes(searchTerm) ? 'success' : '';
        })
      }
      this.tags = copy(this.tags)
    },
    handleClear() {
      this.tags.forEach(tag => {
        tag.type = '';
      })
    },
    /** 移除关键字品牌 */
    clearTag(id, index) {
      let toStr = JSON.stringify(id);
      delKeyWordBrandCharacter(this, toStr, () => {
        this.tags.splice(index,1);
      });
    }
  }
};
</script>

<template>
  <div style="display: inline-block" v-role="'超级管理员'">
    <el-button size="mini" type="primary" @click="open">关键字品牌</el-button>
    <el-drawer
      title="关键字品牌"
      :visible.sync="show"
      direction="rtl">
      <el-input type="text" size="medium" class="searchInput" v-model="searchFiled"
                placeholder="搜索关键字品牌" clearable @clear="handleClear"/>
      <el-button type="primary" size="medium" @click="search()">搜索</el-button>
      <el-input type="text" size="medium" class="searchInput" v-model="addName"
                placeholder="添加关键字品牌" clearable @clear="handleClear"/>
      <el-button type="primary" size="medium" @click="addKeyWordBrandCharacter(addName)">新增</el-button>
      <div style="margin-left: 10px">
        <el-tag
          style="margin: 0 0 10px 10px"
          v-for="tag in tags"
          :key="tag.id"
          closable
          @close="clearTag(Array.of(tag.id), tags.findIndex(item => item.id === tag.id))"
          :type="tag.type"
        >
          {{tag.name}}
        </el-tag>
      </div>
    </el-drawer>



  </div>
</template>

<style scoped>
.searchInput {
  margin: 0 5px 20px 20px;
  width: 260px;
}

</style>